<!--左侧菜单栏-->
<template>
  <div class="leftMenuWrapper">
    <div class="leftMenu">
      <div
        :class="[curIndex === index ? 'active menu' : 'menu']"
        :key="index"
        v-for="(item, index) in arr"
        @click="menuClick(index, item)"
      >
        <el-tooltip effect="dark" :content="item.tip" placement="top">
          <i :class="[`iconfont ${item.icon}`]"></i>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { IArr } from './const'
@Component({})
export default class LeftMenu extends Vue {
  // 数组下表
  curIndex = 1
  arr: IArr[] = [
    {
      icon: 'icon-tongzhi1',
      name: '通知',
      flag: 'notify',
      url: '',
      tip: 'notify',
    },
    {
      icon: 'icon-chat1',
      name: '大厅',
      flag: 'chat',
      url: '',
      tip: 'chat',
    },
    {
      icon: 'icon-shezhi1',
      name: '设置',
      flag: 'setUp',
      url: '',
      tip: 'setUp',
    },
    {
      icon: 'icon-Space',
      name: '空间',
      flag: 'space',
      url: '',
      tip: 'space',
    },
  ]

  // 点击
  menuClick(index: number, item: IArr) {
    this.curIndex = index
    if (item.flag === 'notify') {
      this.$emit(`onNotify`, item)
    } else if (item.flag === 'chat') {
      this.$emit('onChat', item)
    } else if (item.flag === 'space') {
      this.$emit('onSpace', item)
    } else if (item.flag === 'setUp') {
      this.$emit('onSetUp', item)
    } else if (item.flag === 'space') {
      this.$emit('onSpace', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.leftMenu {
  box-sizing: border-box;
  &::-webkit-scrollbar {
    height: 0;
    width: 0;
    color: transparent;
  }
  overflow-y: auto;
  height: 100%;
  border-right: 1px solid #393636;
  .menu {
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    width: 89px;
    height: 89px;
    &.active {
      transition: all 0.5s;
      position: relative;
      background: url('~/assets/images/bbb.png') no-repeat;
      &::after {
        position: absolute;
        left: 0;
        bottom: 1px;
        content: '';
        height: 81px;
        width: 2px;
        background: #25d366;
      }
    }
    i {
      font-size: 30px;
      &.icon-tongzhi1 {
        color: #fff;
      }
      &.icon-chat1 {
        color: #fff;
      }

      &.icon-Space {
        color: #fff;
      }
      &.icon-shezhi1 {
        color: #fff;
      }
    }
  }
}
</style>